<script>
import { request } from '@/utils'
import { Plus } from '@element-plus/icons-vue'
import CaptchaRotate from '@/components/captcha/Captcha.vue'

export default {
  data() {
    return {
      param: '',
      orders: [],
      rules: {
        orderInfo: [
          // { required: true, message: '必须填写订单名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在1-10之间', trigger: 'blur' },
        ],
        address: [
          // { required: true, message: '必须填写地址', trigger: 'change' },
        ],
        price: [
          // { required: true, message: '必须填写价格', trigger: 'change' },
        ],
      },
      order: {
        orderId: null,
        username: null,
        orderInfo: '剁椒鱼头',
        address: '长沙市林科大涉外项目B',
        price: 90.0,
      },
      showCaptcha: true,
      type: 'SLIDER',
    }
  },
  methods: {
    getOrders() {
      request
        .get('http://localhost:8088/api/order/search?size=1000', {}, { noNeedToken: true })
        .then(data => {
          console.log(data)
          this.orders = data.data.list
        })
    },
    search() {
      console.log('搜索订单：', this.order)
      request
        .get('http://localhost:8088/api/order/search', {
          // 如果前端get需要传递参数，使用params：
          // 因为get方式无法发送对象
          params: this.order,
        }, { noNeedToken: true })
        .then(data => {
          console.log(data)
          this.orders = data.data.list
        })
    },
    submit() {
      console.log('准备创建：', this.order)
      request
        .post('http://localhost:8088/api/order', this.order, { noNeedToken: true })
        .then(data => {
          console.log(data)
        })
    },
    reset() {
      this.order = {}
    },
    deleteOrder() {
      let id = 666
      console.log('准备删除订单id=', 666)
      request
        .delete('http://localhost:8088/api/order?id=666', { noNeedToken: true })
        .then(data => {
          console.log(data)
        })
        .catch(e => console.log('删除失败！'))
    },
    login() {
      this.showCaptcha = true
    },
    success(){
      console.log('校验成功，可以关闭并发起登录请求！')
      this.showCaptcha = false
    },
    fail(e){
      console.log('校验失败，原因：', e)
    },
    close(){
      console.log('校验失败，原因：关闭')
      this.showCaptcha = false
    },
    change() {
      if (this.type === 'ROTATE') {
        this.type = 'SLIDER'
      } else if(this.type === 'SLIDER') {
        this.type = 'CONCAT'
      } else if(this.type === 'CONCAT') {
        this.type = 'CLICK'
      } else if(this.type === 'CLICK') {
        this.type = 'ROTATE'
      }
    },
  },

}
</script>

<template>
  <AppPage :show-footer="true">
    <div>
      <el-button type="primary" @click="getOrders">
        <TheIcon icon="cryptocurrency-color:1inch" :size="16" class="mr-4" />点击获取订单
      </el-button>
      <el-button type="danger" @click="deleteOrder">
        <TheIcon icon="mdi:delete" :size="16" class="mr-4" />删除订单
      </el-button>

      <el-divider />

      <div>
        <el-table :data="orders">
          <el-table-column label="ID" prop="orderId" />
          <el-table-column label="用户名" prop="username" />
          <el-table-column label="订单详情" prop="orderInfo" />
          <el-table-column label="订单地址" prop="address" />
          <el-table-column label="价格" prop="price" />
        </el-table>
      </div>

      <el-divider />

      <el-form :model="order" label-width="100px" :rules="rules">
        <el-form-item label="订单名：" prop="orderInfo">
          <el-input v-model="order.orderInfo" />
        </el-form-item>
        <el-form-item label="订单地址：" prop="address">
          <el-input v-model="order.address" />
        </el-form-item>
        <el-form-item label="订单价格：" prop="price">
          <el-input type="number" v-model="order.price" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="search">搜索</el-button>
          <el-button type="primary" @click="submit">创建</el-button>
          <el-button type="warning" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-divider />
      <Captcha 
        v-if="showCaptcha" :type="type" :log="false" 
        generate-url="http://localhost:8080/captcha" 
        validate-url="http://localhost:8080/captcha" 
        @success="success" @fail="fail" @close="close"
      />
      <el-form>
        <el-form-item label="验证并登录：">
          <el-input v-model="param" />
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="login">登录</el-button>
          <el-button type="info" @click="change">切换类型</el-button>
        </el-form-item>
      </el-form>

      <el-divider />
    </div>
  </AppPage>
</template>

<!-- 上传样式效果 -->
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
